<script setup lang="ts">
import Footer from '../components/Footer.vue';
</script>

<template>
  <div class="about">
    <section class="banner">
      <div class="container">
        <img loading="lazy" src="https://img1.hijs.cc/xubai/images/banner/about.jpg" alt="关于我们banner" class="img-fluid">
      </div>
    </section>
    <section class="company-info">
      <div class="container">
        <div class="row align-items-center">
          <div class="col-md-6">
            <img loading="lazy" src="https://img1.hijs.cc/xubai/images/factory.jpg" alt="工厂图片" class="img-fluid">
          </div>
          <div class="col-md-6">
            <h2>公司简介</h2>
            <p>沧县旭佰塑料制品厂是一家专业从事塑料制品生产和销售的企业，主营塑料食品罐、广口瓶、塑料喷瓶、兽药农药瓶等塑料制品的生产和定制销售。</p>
            <p>经过多年的发展，我们已经建立了完善的质量管理体系，获得了多项专利和认证。我们的产品广泛应用于各个行业，赢得了客户的广泛认可。</p>
          </div>
        </div>
      </div>
    </section>

    <section class="company-culture bg-light">
      <div class="container">
        <div class="row">
          <div class="col-md-12 text-center mb-5">
            <h2>企业文化</h2>
          </div>
        </div>
        <div class="row">
          <div class="col-md-4">
            <div class="culture-item">
              <h3>企业愿景</h3>
              <p>成为塑料制品行业的领先企业，打造值得信赖的品牌。</p>
            </div>
          </div>
          <div class="col-md-4">
            <div class="culture-item">
              <h3>企业使命</h3>
              <p>以质取胜铸就辉煌，为客户提供优质的塑料制品解决方案。</p>
            </div>
          </div>
          <div class="col-md-4">
            <div class="culture-item">
              <h3>核心价值观</h3>
              <p>质量至上、客户为先、诚信经营、创新发展。</p>
            </div>
          </div>
        </div>
      </div>
    </section>

    <section class="certifications">
      <div class="container">
        <div class="row">
          <div class="col-md-12 text-center mb-5">
            <h2>资质认证</h2>
          </div>
        </div>
        <div class="row justify-content-center">
          <div class="col-md-4 text-center">
            <img src="https://img1.hijs.cc/xubai/images/ccc.jpg" alt="CCC认证" class="cert-img">
            <h4 class="mt-3">CCC认证</h4>
          </div>
          <div class="col-md-4 text-center">
            <img src="https://img1.hijs.cc/xubai/images/iso14001.jpg" alt="ISO 14001认证" class="cert-img">
            <h4 class="mt-3">ISO 14001认证</h4>
          </div>
          <div class="col-md-4 text-center">
            <img src="https://img1.hijs.cc/xubai/images/aa.jpg" alt="AA诚信等级" class="cert-img">
            <h4 class="mt-3">AA诚信等级</h4>
          </div>
        </div>
      </div>
    </section>

    <section class="advantages bg-light">
      <div class="container">
        <div class="row">
          <div class="col-md-12 text-center mb-5">
            <h2>我们的优势</h2>
          </div>
        </div>
        <div class="row">
          <div class="col-md-6 mb-4">
            <div class="advantage-item">
              <img src="https://img1.hijs.cc/xubai/images/1.jpg" alt="专业生产团队" class="advantage-img">
              <p>拥有熟练的质控人员和工人，确保产品品质。</p>
            </div>
          </div>
          <div class="col-md-6 mb-4">
            <div class="advantage-item">
              <img src="https://img1.hijs.cc/xubai/images/2.jpg" alt="定制化服务" class="advantage-img">
              <p>支持来图来样加工，提供个性化解决方案。</p>
            </div>
          </div>
          <div class="col-md-6 mb-4">
            <div class="advantage-item">
              <img src="https://img1.hijs.cc/xubai/images/3.jpg" alt="质量保证" class="advantage-img">
              <p>严格的质量管理体系，确保产品符合标准。</p>
            </div>
          </div>
          <div class="col-md-6 mb-4">
            <div class="advantage-item">
              <img src="https://img1.hijs.cc/xubai/images/4.jpg" alt="一站式服务" class="advantage-img">
              <p>从设计、生产到售后的全程服务支持。</p>
            </div>
          </div>
        </div>
      </div>
    </section>

    <Footer />


  </div>
</template>

<style scoped>
.company-info {
  padding: 60px 0;
}

.company-info h2 {
  margin-bottom: 30px;
}

.company-info p {
  margin-bottom: 20px;
  line-height: 1.6;
}

.company-culture {
  padding: 60px 0;
}

.culture-item {
  text-align: center;
  padding: 30px;
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  height: 100%;
}

.culture-item h3 {
  margin-bottom: 20px;
  color: #333;
}

.culture-item p {
  color: #666;
}

.certifications {
  padding: 60px 0;
}

.cert-img {
  max-width: 150px;
  height: auto;
  margin-bottom: 15px;
}

.advantages {
  padding: 60px 0;
}

.advantage-item {
  background: white;
  padding: 30px;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  height: 100%;
}

.advantage-item h4 {
  color: #333;
  margin-bottom: 15px;
}

.advantage-item p {
  color: #666;
  margin-bottom: 0;
}

.company-info {
  padding: 60px 0;
}

.company-info h2 {
  margin-bottom: 30px;
}

.company-info p {
  margin-bottom: 20px;
  line-height: 1.6;
}

.company-culture {
  padding: 60px 0;
}

@media (max-width: 768px) {
  .culture-item {
    margin-bottom: 30px;
  }
  .col-md-4 {
    margin-bottom: 30px;
  }

  .company-info img {
    margin-bottom: 40px;
  }
}



.advantage-item {
  text-align: center;
  background: white;
  padding: 30px;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  height: 100%;
  transition: all 0.3s ease;
}

.advantage-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
}

.culture-item:nth-child(1) {
  background: linear-gradient(135deg, #E3F2FD 0%, #BBDEFB 100%);
}

.culture-item:nth-child(2) {
  background: linear-gradient(135deg, #E8F5E9 0%, #C8E6C9 100%);
}

.culture-item:nth-child(3) {
  background: linear-gradient(135deg, #E1F5FE 0%, #B3E5FC 100%);
}

.culture-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
}

.culture-item h3 {
  margin-bottom: 20px;
  color: #333;
  font-weight: 600;
}

.culture-item p {
  color: #555;
  line-height: 1.6;
}
.advantage-img {
  width: 100%;
  height: auto;
  margin-bottom: 20px;
  border-radius: 8px;
}
.banner {
  padding: 60px 0;
  background: #f8f9fa;
  margin-top: 60px;
}

@media (max-width: 768px) {
  .banner {
    margin-top: 40px;
    padding-bottom: 5px;
  }
}
</style>
